@charset "utf-8";
@import "../base/conf";

$kingBgColor: (
	'info': $infoBgColor,
	'primary': $primaryBgColor,
	'danger': $dangerBgColor,
	'warning': $warningBgColor,
	'success': $successBgColor,
);
$kingBgHoverColor: (
	'info': $infoHoverColor,
	'primary': $primaryHoverColor,
	'danger': $dangerHoverColor,
	'warning': $warningHoverColor,
	'success': $successHoverColor,
);
//生成不同类型的class 
@mixin button-create($color,$background,$border,$hover){
	&{
		border-color:$border;
		color:$color;
	}
	&:hover{
		background-color:$hover;
		@if $hover != $defaultHoverColor{
			border-color:$hover;
		}
	}
	&.king-disabled,&[disabled]{
		background-color:#fff;
		border-color:#e5e5e5;
		color: #e6e6e6;
	}

	&.king-border{
		background:none;
		border-color:$border;
		@if $color == $defaultFontColor{		//.king-default 需要特殊处理color
			color:#555;
		}@else{
			color :$border;	
		}
		&.king-disabled,&[disabled]{
			opacity:.65;
			@if $color == $defaultFontColor{	//.king-default 需要特殊处理color
				color:lighten(#555,5%);
			}@else{
				color:lighten($border,5%);	
			}
			background:none;			 
			border-color:lighten($border,5%);
		}
		&:hover{			
			@if $color == $defaultFontColor{	//.king-default 需要特殊处理color
				color:#666;
				background-color: $defaultHoverColor;
			}@else{
				color:#fff;
				background-color:$background;
			}
		}
	}
}
.king-btn{
	min-width:100px;
	display:inline-block;
	white-space:nowrap;
	outline:none;
	cursor:pointer;
	padding:9px 10px;
	text-align:center;
	line-height:16px;
	vertical-align:middle;
	font-size:14px;
	background: $defaultBgColor;
	border:1px solid #eee;
	color:$defaultFontColor;
	&:hover{background-color:#e1e1e1;text-decoration:none;color:#555;}
	&.king-disabled{background-color:#f5f5f5;border-color:#e9e9e9;}
	&.king-noborder{border:none!important;}
	&.king-radius{border-radius:2px;}
	&.king-round{border-radius:20px;}

	&.king-minw{min-width:110px;}
	&.king-btn-mini{padding:3px 5px;min-width:50px;font-size: 12px;}
	&.king-btn-small{padding:7px 10px;min-width:80px;}
	&.king-btn-large{padding:11px 16px;min-width:120px;font-size:16px;}	 

	&.king-default {
	 	@include button-create($defaultFontColor, $defaultBgColor, $defaultBorderColor,$defaultHoverColor);
	}
	&.king-info {
	 	@include button-create($infoFontColor, $infoBgColor, $infoBgColor,$infoHoverColor);
	}
	&.king-primary{
		@include button-create($primaryFontColor, $primaryBgColor, $primaryBgColor,$primaryHoverColor);
	}
	&.king-success{
		@include button-create($successFontColor, $successBgColor, $successBgColor,$successHoverColor);
	}
	&.king-warning{
		@include button-create($warningFontColor, $warningBgColor, $warningBgColor, $warningHoverColor);
	}
	&.king-danger{
		@include button-create($dangerFontColor, $dangerBgColor, $dangerBgColor, $dangerHoverColor);
	}
	&.king-disabled{
		cursor:default;
	}
	&.king-file-btn{
		overflow:hidden;
		position:relative;
	}
	&.king-file-btn input[type=file]{
		width:150%;height:100%;font-size:300px;opacity:0;filter:alpha(opacity=0); cursor:pointer;
		left:-40px;right:0;bottom:0;top:0;position:absolute;padding:0px;margin:0px;overflow:hidden;
	}

	&.king-btn-icon{
		width:36px;
		min-width:36px;
		padding-left:0;
		padding-right:0;
		.btn-icon{
			margin-right:0;
		}
		&.king-btn-mini{
			width:24px;
			min-width:24px;
		}
		&.king-btn-small{
			width:32px;
			min-width:32px;
		}
		&.king-btn-large{
			width:38px;
			min-width:38px;
		}
	}	
	.btn-icon{
		margin-right:6px;
	}
}

.king-btn-menu{
	position: relative;
	&>ul{
		padding: 0;
		box-shadow: none;
		border-color: #e5e5e5;
		&>li{
			border-bottom: 1px solid #e5e5e5;
			&:last-child{
				border-bottom: none;
			}
			:hover{
				background-color:#fafafa;
			}
			.fa{
				margin-top: 0;
			}
			&>a{
				padding: 0 10px;
				height: 30px;
				line-height: 30px;
				font-size: 12px;
				color: #666666;
			}
		}
	}
}

.king-btn-split{
	position: relative;
    display: inline-block;
    vertical-align: middle;
    &>.king-btn{
    	min-width: auto;
    	position: relative;
    	float: left;
    	border-radius: 2px;
    }
    &>.king-btn:first-child {
    	margin-left: 0;
    	background-color: #fafafa;
    	border-color: #e5e5e5;
	}
    &>.king-btn:first-child:not(:last-child){
    	border-top-right-radius: 0;
    	border-bottom-right-radius: 0;
    }
    .king-btn:not(:first-child){
    	margin-left: -1px;
    	color: #666666;
    	border-color:#e5e5e5;
    	background-color: #fff;
    	border-top-left-radius: 0;
    	border-bottom-left-radius: 0;
    }

	@each $selector, $color in $kingBgColor{
		.king-#{$selector}:first-child{
			color: #{$color};
		}
		&:hover .king-#{$selector}:not(:first-child){
			background-color: #{$color};
			color: $bg-f;
			border-color: #{$color};
			opacity: 1;
		}
	}
}
@each $selector, $color in $kingBgHoverColor{
	.king-btn-split:hover .king-#{$selector}:first-child{
		background-color: #{$color};
		color: $bg-f;
		border-color: #{$color};
		opacity: 1;
	}
}
.king-btn-group{
	margin-right: 1px;
	display: inline-block;
	.king-btn{
		float: left;
		margin-left: -1px;
		&:first-child{
			margin-left: 0;
		}
	}
	.king-round{
		border-radius: 0;
		&:first-child{
			border-radius: 20px 0 0 20px;
		}
		&:last-child{
			border-radius: 0 20px 20px 0;
		}
	}

	.king-radius{
		border-radius: 0;
		&:first-child{
			border-radius: 2px 0 0 2px;
		}
		&:last-child{
			border-radius: 0 2px 2px 0;
		}
	}

	&:after{
		content: '.';
	    display: block;
	    height: 0;
	    clear: both;
	    visibility: hidden;
	}

	&.king-btn-justified {
	    display: table;
	    width: 100%;
	    table-layout: fixed;
	    border-collapse: separate;

	    .king-btn{
    	    display: table-cell;
		    float: none;
		    width: 100%;
	    }
	}
}

